<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
import { tableBg } from "../../../utils/scss/color";
const charts = ref(null);
onMounted(() => {
  if (charts.value) {
    const myChart = echarts.init(charts.value);
    var value = 0.45;
    var option = {
      backgroundColor: tableBg,
      title: [
        {
          text: "充值占比",
          x: "50%",
          y: "70%",
          // textStyle: {
          fontSize: 14,
          fontWeight: "100",
          color: "#5dc3ea",
          lineHeight: 16,
          textAlign: "center",
          // },
        },
      ],
      graphic: [
        {
          type: "group",
          left: "center",
          top: "35%",
          children: [
            {
              type: "text",
              z: 100,
              left: "40",
              top: "middle",
              style: {
                fill: "#aab2fa",
                text: "",
                font: "20px Microsoft YaHei",
              },
            },
          ],
        },
      ],
      series: [
        {
          type: "liquidFill",
          radius: "47%",
          center: ["50%", "45%"],
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#446bf5",
                },
                {
                  offset: 1,
                  color: "#2ca3e2",
                },
              ],
              globalCoord: false,
            },
          ],
          data: [value], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: "RGBA(51, 66, 127, 0.7)",
          },
          label: {
            // textStyle: {
            fontSize: 50,
            color: "#fff",
            // },
          },
          outline: {
            show: false,
            borderDistance: 10,
            itemStyle: {
              borderWidth: 2,
              borderColor: "#112165",
            },
          },
        },
      ],
    };

    // Display the chart using the configuration items and data just specified.
    myChart.setOption(option);
  }
});
</script>

<template>
  <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
